import React, { useState } from 'react';
import { motion } from 'motion/react';
import { Button } from '../../components/ui/button';
import { Card, CardContent } from '../../components/ui/card';
import { DigitalHuman } from '../digitalHuman/DigitalHuman';
import { SidebarTrigger } from '../../components/ui/sidebar';
import { 
  Mic, 
  MessageSquare, 
  Calendar, 
  FileText, 
  Users, 
  HelpCircle,
  User,
  ChevronRight,
  Menu,
  Megaphone,
  ShieldCheck,
  Workflow,
  HeartPulse
} from 'lucide-react';

interface HomePageProps {
  onStartVoiceChat: () => void;
  onStartTextChat: () => void;
  onLogin: () => void;
  onNavigate: (page: 'home' | 'chat' | 'recommendation' | 'record' | 'notice' | 'help') => void;
}

export function HomePage({ onStartVoiceChat, onStartTextChat, onLogin, onNavigate }: HomePageProps) {
  const [hoveredAction, setHoveredAction] = useState<number | null>(null);
  
  const quickActions = [
    {
      icon: <Calendar className="w-6 h-6" />,
      title: "科室查询",
      description: "查找合适的医疗科室"
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: "排队查询",
      description: "实时查看就诊排队情况"
    },
    {
      icon: <FileText className="w-6 h-6" />,
      title: "病历查询",
      description: "查看历史就诊记录"
    }
  ];

  const features = [
    {
      icon: <HeartPulse className="w-8 h-8 text-blue-500" />,
      title: "智能精准预诊",
      description: "基于先进算法，模拟医生问诊流程，为您提供精准的科室建议。"
    },
    {
      icon: <Workflow className="w-8 h-8 text-green-500" />,
      title: "简化就医流程",
      description: "从导诊、挂号到病历查询，一站式服务为您节省宝贵时间。"
    },
    {
      icon: <ShieldCheck className="w-8 h-8 text-red-500" />,
      title: "个人健康档案",
      description: "安全存储您的就诊记录和健康数据，随时随地轻松查阅。"
    }
  ];

  return (
    <div className="flex flex-1 w-full" style={{
      backgroundImage: "url('/src/shared/assets/home-background.png')",
      backgroundSize: "cover",
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat"
    }}>
      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col min-h-0">
        {/* 顶部导航栏 */}
        <motion.nav 
          className="flex-shrink-0 bg-gradient-to-r from-blue-50/90 to-green-50/90 backdrop-blur-md border-b border-gray-100"
          initial={{ y: -100 }}
          animate={{ y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
            <div className="flex items-center space-x-4">
              <SidebarTrigger variant="outline" size="icon" className="rounded-full">
                <Menu className="h-5 w-5" />
              </SidebarTrigger>
              <h1 className="text-xl font-bold text-gray-800">医联智导系统</h1>
            </div>

            {/* 右侧导航 */}
            <div className="flex items-center space-x-2">
              <Button 
                onClick={()=> onNavigate('notice')}
                variant="ghost"  
                className="text-gray-600 hover:text-gray-900 hover:bg-blue-50 hidden sm:flex items-center text-sm">
                <Megaphone className="w-4 h-4 mr-2" />
                系统公告
              </Button>
              <Button
                onClick={()=> onNavigate('help')} 
                variant="ghost" className="text-gray-600 hover:text-gray-900 hover:bg-blue-50 hidden sm:flex items-center text-sm">
                <HelpCircle className="w-4 h-4 mr-2" />
                帮助中心
              </Button>
              <Button onClick={onLogin} variant="outline" className="hidden sm:flex items-center text-sm">
                <User className="w-4 h-4 mr-2" />
                登录 / 注册
              </Button>
            </div>
          </div>
        </motion.nav>

        {/* 主要内容区 */}
        <div className="flex-1">
          <div className="p-4 sm:p-6 lg:p-8 h-full">
            <div className="max-w-6xl mx-auto w-full h-full">
              {/* 核心交互区 */}
              <motion.div
                className="mb-8 h-[calc(100%-100px)]"
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
              >
                <Card className="h-full bg-white/80 backdrop-blur-sm border-2 border-gray-100 shadow-xl rounded-3xl overflow-hidden">
                  <CardContent className="p-0 h-full">
                      {/* 数字人形象区域 */}
                      <div className="w-full flex-shrink-0 lg:w-96 p-6 border-r border-gray-100 flex flex-col items-center justify-center bg-gradient-to-b from-blue-50/50 to-green-50/50">
                        <DigitalHuman size="large" emotion="happy" />
                        <div className="mt-6 text-center">
                          <p className="text-sm text-gray-600 mb-4">
                            您可以通过语音或文字与我交流，我会根据您的症状为您推荐合适的科室
                          </p>
                          <div className="flex flex-col sm:flex-row gap-2 justify-center">
                            <Button 
                              onClick={onStartVoiceChat}
                              size="sm"
                              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-lg"
                            >
                              <Mic className="w-4 h-4 mr-2" />
                              语音问诊
                            </Button>
                            <Button 
                              onClick={onStartTextChat}
                              variant="outline"
                              size="sm"
                              className="border-blue-200 hover:border-blue-300 rounded-lg"
                            >
                              <MessageSquare className="w-4 h-4 mr-2" />
                              文字问诊
                            </Button>
                          </div>
                        </div>
                      </div>
                      {/* 快捷功能区 */}
                      <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.4 }}
                      >
                        <h3 className="text-xl text-left mb-4 text-gray-800 font-semibold">快捷服务</h3>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          {quickActions.map((action, index) => (
                            <motion.div
                              key={index}
                              whileHover={{ y: -3 }}
                              transition={{ duration: 0.2 }}
                              className="group"
                              onMouseEnter={() => setHoveredAction(index)}
                              onMouseLeave={() => setHoveredAction(null)}
                            >
                              <Card 
                                className={`p-4 text-left cursor-pointer transition-all duration-300 border-2 ${
                                  hoveredAction === index 
                                    ? 'border-blue-300 shadow-md bg-blue-50/50' 
                                    : 'border-gray-100 hover:border-blue-200 bg-white/60'
                                } backdrop-blur-sm`}
                                onClick={() => {
                                  if (index === 0) onNavigate('recommendation');
                                  if (index === 2) onNavigate('record');
                                }}
                              >
                                <CardContent className="p-0">
                                  <div className="flex items-start">
                                    <div className={`w-10 h-10 mr-3 rounded-lg flex items-center justify-center flex-shrink-0 ${
                                      hoveredAction === index 
                                        ? 'bg-blue-100 text-blue-600' 
                                        : 'bg-gray-100 text-gray-600'
                                    }`}>
                                      {action.icon}
                                    </div>
                                    <div className="flex-1">
                                      <h4 className="font-medium text-gray-900 mb-1 flex items-center">
                                        {action.title}
                                        <ChevronRight className="w-4 h-4 ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />
                                      </h4>
                                      <p className="text-xs text-gray-600">{action.description}</p>
                                    </div>
                                  </div>
                                </CardContent>
                              </Card>
                            </motion.div>
                            ))}
                        </div>
                        </motion.div>
                    </CardContent>
                </Card>
              </motion.div>

            {/* 系统特色 */}
            <motion.div
              className="py-12"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.8 }}
            >
              <div className="text-center mb-8">
                <h2 className="text-3xl font-bold text-gray-800">系统特色</h2>
                <p className="text-lg text-gray-600 mt-2">我们致力于提供更智能、更便捷的医疗服务</p>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                {features.map((feature, index) => (
                  <Card key={index} className="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300">
                    <CardContent className="p-0 text-center">
                      <div className="flex justify-center mb-4">{feature.icon}</div>
                      <h3 className="text-xl font-semibold text-gray-900 mb-2">{feature.title}</h3>
                      <p className="text-base text-gray-600">{feature.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </motion.div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}